<template>
  <div class="userManage-wrapper">
    <a-row class="card-top">
      <a-col :span="5" style="padding-right: 9px;">
        <a-card title="组织机构" :style="{height: treeHeight + 'px'}">
          <a-badge v-if="queryParam.deptName" slot="extra" status="processing" :text="queryParam.deptName" />
          <a-input-search placeholder="请输入机构名称" enter-button />
          <a-tree
            :tree-data="treeData"
            :replaceFields="{
              children:'children',
              title:'label',
              value:'id',
              key:'id'
            }"
            @select="selectDept"
            :style="{
              overflow: 'auto',
              marginTop: '10px',
              height: (treeHeight - 115) + 'px'
            }"
          >
          </a-tree>
        </a-card>
      </a-col>
      <a-col :span="19" ref="listTable">
        <a-card title="查询条件" v-show="showSearch">
          <div slot="extra">
            <a-space>
              <a-button-group>
                <a-button type="primary" icon="search" @click="handleSearch">查询</a-button>
                <a-button type="primary" icon="export" @click="resetForm">重置</a-button>
                <a-button type="primary" icon="funnel-plot" @click="toolSearch">高级搜索</a-button>
              </a-button-group>
            </a-space>
          </div>
          <a-form-model ref="queryForm" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-row>
              <a-col :span="6">
                <a-form-model-item label="用户名" prop="userName">
                  <a-input v-model="queryParam.userName" placeholder="请输入用户名" allow-clear />
                </a-form-model-item>
              </a-col>
              <a-col :span="6">
                <a-form-model-item label="手机号码" prop="phonenumber">
                  <a-input v-model="queryParam.phonenumber" placeholder="请输入手机号码" allow-clear />
                </a-form-model-item>
              </a-col>
              <a-col :span="6">
                <a-form-model-item label="状态" prop="selectStatus">
                  <a-select
                    v-model="queryParam.selectStatus"
                    allow-clear
                    label-in-value
                    style="width: 100%"
                    placeholder="请选择人员状态"
                    @change="statusHandleChange"
                  >
                    <a-select-option v-for="item in statusOptions" :key="item.dictValue">
                      {{ item.dictLabel }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :span="6">
                <a-form-model-item>
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-form-model>
        </a-card>
        <a-card>
          <a-row>
            <a-col :span="12" class="select-bottom">
              <a-space>
                <a-button type="primary" icon="plus" @click="handleAdd">新增用户</a-button>
                <a-button type="danger" icon="delete" :loading="deleteLoading" @click="handleBatchDelete">批量删除</a-button>
              </a-space>
            </a-col>
          </a-row>
          <base-table
            ref="userTable"
            :list-api="'/system/user/list'"
            :row-key="'userId'"
            :openSelect="true"
            :tableHead="tableHead"
            :loading="loading"
            @showSearchHandle="showSearchHandle"
            :scroll="{ y: tableHeight }"
          >
            <span slot="status" slot-scope="{ text }">
              <a-badge :status="text === '0' ? 'processing' : 'error'" :text="text === '0' ? '正常' : '停用'" />
              <!-- <a-tag :color="text === '0' ? '#87d068' : '#f50'">
                {{ text === '0' ? '正常' : '停用' }}
              </a-tag> -->
            </span>
            <div slot="action" slot-scope="{ text }">
              <!-- <a-badge status="processing" /> -->
              <a-button type="primary" size="small" @click="handleEdit(text)">
                编辑
              </a-button>
              <a-popconfirm
                title="你确定要删除当前列吗?"
                ok-text="是"
                cancel-text="否"
                @confirm="handleDelete(text)"
              >
                <a-button type="danger" size="small" style="margin-left:8px">
                  删除
                </a-button>
              </a-popconfirm>
            </div>
          </base-table>
        </a-card>
      </a-col>
    </a-row>
    <user-model
      :roleOption="roleOption"
      :currentRow="currentRow"
      :dialogVisible="dialogVisible"
      @cancel="dialogVisible = false"
      @ok="handleOk"
      v-if="dialogVisible"
    />
    <search-tool
      v-if="toolSearchVisible"
      :dialogVisible="toolSearchVisible"
      @cancel="toolSearchVisible = false"
      @ok="handleOk"
      :statusOptions="statusOptions"
      @searchToolOk="searchToolOk"
    >
    </search-tool>
  </div>
</template>

<script>
import ListPage from './listPage'
export default {
  ... ListPage
}
</script>
<style lang="scss" scoped>
.select-width {
  width: 150px;
  margin-right: 16px;
  margin-bottom: 10px;
}
.select-bottom {
  margin-bottom: 10px;
}
.card-top {
  margin-top: 8px;
}
.ant-form-item {
  margin-bottom: 0;
}
</style>
